<template>
   <!-- <div>     后台有数据传过来的时候用的
       <h3>{{photoinfo.title}}</h3>
       <p class="subtitle">
           <span>发表时间:{{photoinfo.add_time}}</span>
           <span>点击: {{photoinfo.click}}次</span>
       </p>
       <hr>
        略缩图区   

         图片内容区域                                   
       <div class="content" v-html="photoinfo.content">
           
       </div>

        评论子组件 
   </div> -->
    <div class="photoinfo-container">   <!-- 后台没数据传过来，只能模拟数据 -->
       <h3>{{photoinfo.title}}</h3>
       <p class="subtitle">
           <span>发表时间:{{photoinfo.add_time}}</span>
           <span>点击: {{photoinfo.click}}次</span>
       </p>
       <hr>
        <!-- 略缩图区  -->
                <!-- 有数据的情况下 -->
        <!-- <vue-preview :slides="list" @close="handleClose"></vue-preview> -->
     <div class="thumbs">
         <vue-preview :slides="list" @close="handleClose"></vue-preview>
     </div>
         <!-- 图片内容区域  -->
       <div class="content" v-html="photoinfo.content">
          
       </div>

        <!-- 评论子组件  -->
        <cmt-box :id="id"></cmt-box>
   </div>
   
</template>

<script>
import comment from '../subcomponents/comment.vue'
export default{
    data(){
        return {
            id:this.$route.params.id,
            photoinfo: {id:1,title:'非常迷人的蓝胖子',click:1000,daa_time: new Date(),
            content:'哆啦A梦这部连载了45本单行本的漫画，可说是深入人心。作者藤子不二雄（藤子F不二雄、藤子不二雄A）的诸多作品中《多啦A梦》可能不是他们最得意之作，却是大家心中最美好的一套漫画。《多啦A梦》这作品相信曾带给许多人一些美好的童年回忆。 自1996年《多啦A梦》作者藤子F不二雄之死，《多啦A梦》漫画是否也有个结局了呢？这是多年以来大家所争议的话题。曾有多个不同版本的结局留传于世这是一只蓝胖子，总能实现各种愿望'},
            list: [
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            alt: 'picture2',
            title: 'Image Caption 2',
            w: 1200,
            h: 900
          }
        ]

        }
    },
    created() {
      //  this.getPhontoInfo()  获取数据
      // this.getThumbs()
    },
    methods:{
        // getPhontoInfo(){     有后台数据的时候可以这样调用
        //     this.$http.get('api/getimageInfo/:'+this.id).then(result =>{
        //         if(result.body.status === 0){
        //             this.photoinfo = result.body.message[0]
        //         }
        //     })
        // }，,
        // getThumbs(){        动态获取图片
        //     this.$http.get('api/getthumimages/:'+this.id).then(result =>{
        //         if(result.body.status === 0){
        //             result.body.message.forEach(item => {
        //                 item.w = 600;              这里不止一张图片，遍历这个数组的时候为每张图片添加款和高
        //                 item.h = 400;
        //             });
        //             this.list = result.body.message
        //         }
        //     })
        // }  
        handleClose () {
        console.log('close event')
      }  
    },
    components:{
        'cmt-box':comment
    }
}
</script>
<style lang="scss" scoped>
.photoinfo-container{
    padding: 0 5px;
    h3{
       color: #26a2ff;
       font-size: 15px;
       text-align: center;
    }
    .subtitle{
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }
    .content{
        font-size: 13px;
        line-height: 30px;
    }
    .thumbs{
        img{
            margin: 10px;
        box-shadow:  0 0 8px;
        }
    }
}
</style>
